<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Time 时间</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .head-nav{
            display: flex;
            justify-content: space-between;
            padding: 10px;
            border-bottom: 1px solid #EEF0F4;
        }

        .list{
            margin: 20px;
        }
        .list ul li{
            list-style: none;
            height: 38px;
            line-height: 38px;
            background: #F7F8FA;
            margin: 10px 0;
            padding: 0px 10px;
            border-radius: 20px;
            font-weight: bold;
            font-size: 14px;
        }
        .list ul li:hover{
            background: #EEF0F4
        }
    </style>
</head>
<body>
    <div class="head-nav">
        <div onclick="history.go(-1)">《</div>
        <div>Time 时间</div>
        <div></div>
    </div>

    <div class="list">
        <ul>
            <li><span class="remainedTime-diffTime" data-timer="1634299800000"></span></li>
            <li><span class="remainedTime-diffTime" data-timer="1634304000000"></span></li>
            <li><span class="remainedTime-diffTime" data-timer="1634308200000"></span></li>
        </ul>
    </div>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script>
        // 时间戳转时间格式
        function formatDate(date) {
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var day = date.getDate();
            var hour = date.getHours();
            var minute = date.getMinutes();
            var second = date.getSeconds();
            //  return year+"-"+month+"-"+date+" "+hour+":"+minute+":"+second; 
            return year + '-' + (String(month).length > 1 ? month : '0' + month) + '-' +
                (String(day).length > 1 ? day : '0' + day) + ' ' + (String(hour).length > 1 ? hour : '0' + hour) + ':' + (String(minute).length > 1 ? minute : '0' + minute)
                + ':' + (String(second).length > 1 ? second : '0' + second)
        }
        //如果记得时间戳是毫秒级的就需要*1000 不然就错了记得转换成整型
        var d = new Date(1634270400000);
        console.log(formatDate(d))

        // 批量添加id
        function add_id(){
            var dlall=document.getElementsByClassName("remainedTime-diffTime")
            for(i=0;i<dlall.length;i++){
                dlall[i].id='id_'+i;
            }
        }
        add_id();

        // 循环获取时间戳，调用倒计时
        let len = $("li .remainedTime-diffTime").length;
        for(let i = 0; i<len; i++){
            let timer = $("li .remainedTime-diffTime").eq(i).attr("data-timer") - 0;
            TimeDown(`id_${i}`, timer)
        }
        
        // 倒计时
        function TimeDown(id, endDateStr) {
            //结束时间
            var endDate = new Date(endDateStr);
            //当前时间
            var nowDate = new Date();
            //相差的总秒数
            var totalSeconds = parseInt((endDate - nowDate) / 1000);
            //天数
            var days = Math.floor(totalSeconds / (60 * 60 * 24)).toString().padStart(2,'0');
            //取模（余数）
            var modulo = totalSeconds % (60 * 60 * 24).toString().padStart(2,'0');
            //小时数
            var hours = Math.floor(modulo / (60 * 60)).toString().padStart(2,'0');
            modulo = modulo % (60 * 60);
            //分钟
            var minutes = Math.floor(modulo / 60).toString().padStart(2,'0');
            //秒
            var seconds = (modulo % 60).toString().padStart(2,'0');

            days = days <= 0 ? "00" : days;
            hours = hours <= 0 ? "00" : hours;
            minutes = minutes <= 0 ? "00" : minutes;
            seconds = seconds <= 0 ? "00" : seconds;

            //输出到页面
            document.getElementById(id).innerHTML = "剩余抢购:" + days + "天" + hours + "：" + minutes + "：" + seconds;
            //延迟一秒执行自己
            let delay = setTimeout(function () {
                TimeDown(id, endDateStr);
                clearTimeout(delay)
            }, 1000)
        }


        // 时间格式转时间戳
        var date = new Date('2021-10-15 12:00:00').getTime();
        console.log(date); // 1634270400000


        
    </script>
</body>
</html>